<!DOCTYPE html> 
<html>
    <head>
       
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
	    <meta charset="utf-8">
	    <link rel="stylesheet" href="css/mapa.css"/>
 	   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>
 	    <link rel="stylesheet" href="css/mapa.css"/>
 		 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
		<script  type="text/javascript" src="lib/jquery/jquery.ui.map.js"></script>
        <script  type="text/javascript" src="lib/jquery/jquery.ui.map.extensions.js"></script>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
		
       </head>
    <body>
    	<div id="container">
    				
		  
			<!-- HOME -->
			<div data-role="page" id="home" data-title="Welcome to WAYF">
			   <div data-role="navbar" data-iconpos="top" class="nav-glyphish-example" data-grid="d">
				    <ul>
				        <li><a href="#home" data-transition="none" data-icon="home" class="ui-btn-active" data-theme="c">Map</a></li>
				        <li><a href="#chat" data-transition="none" data-icon="edit" data-theme="c">Chat</a></li>
				        <li><a href="#share" data-transition="none" data-icon="check" data-theme="c">Share</a></li>
				        <li><a href="#places" data-transition="none"  data-icon="star" data-theme="c">Places</a></li>
				        <li><a href="#settings" data-transition="none" data-icon="gear" data-theme="c">Settings</a></li>
				   </ul>
    			   </div>
    			   <div id="map">
    			   </div>
    			   </br>
			       <ul data-role="listview" class="posiami" data-inset="true"></ul>
			</div>
			<!-- /HOME -->	
			<!-- CHAT -->
			<div data-role="page" id="chat" data-title="Chat">
			   <div data-role="navbar" data-iconpos="top" class="nav-glyphish-example" data-grid="d">
				    <ul>
				        <li><a href="#home" data-transition="none" data-icon="home" data-theme="c">Map</a></li>
				        <li><a href="#chat" data-transition="none" data-icon="edit" class="ui-btn-active" data-theme="c">Chat</a></li>
				        <li><a href="#share" data-transition="none" data-icon="check" data-theme="c">Share</a></li>
				        <li><a href="#places" data-transition="none"  data-icon="star" data-theme="c">Places</a></li>
				        <li><a href="#settings" data-transition="none" data-icon="gear"  data-theme="c">Settings</a></li>
				   </ul>
    		   </div>
    		   </br>
    			  <ul data-role="listview" class="search"  data-filter="true" data-filter-placeholder="Search friend..." data-inset="true">
    			  	
    			 </ul>
			</div>
			<!-- /CHAT -->	
			<!-- SHARE -->
			<div data-role="page" id="share" data-title="Share">
				<script src="https://cdn.firebase.com/v0/firebase.js"></script>
		  		<script type='text/javascript' src='https://cdn.firebase.com/v0/firebase-simple-login.js'></script>
		  		<script type='text/javascript' src='https://login.persona.org/include.js'></script>
		  		<script type='text/javascript' src='js/shareChat.js'></script>
			   <div data-role="navbar" data-iconpos="top" class="nav-glyphish-example" data-grid="d">
				    <ul>
				        <li><a href="#home" data-transition="none" data-icon="home" data-theme="c">Map</a></li>
				        <li><a href="#chat" data-transition="none" data-icon="edit" data-theme="c">Chat</a></li>
				        <li><a href="#share" data-transition="none" data-icon="check" class="ui-btn-active" data-theme="c">Share</a></li>
				        <li><a href="#places" data-transition="none"  data-icon="star" data-theme="c">Places</a></li>
				        <li><a href="#settings" data-transition="none" data-icon="gear" data-theme="c">Settings</a></li>
				   </ul>
			   </div>
				   <form id="comparte">

			            <label>Titulo Entrada</label><input type='text' id='messageTitle' class='titulo' placeHolder='Add titulo...'>
	            		<label>Texto</label><textarea id='messageInput' placeHolder="Enter note text here." class="texto"></textarea>
			       </form> 
			</div>
			<!-- /SHARE -->	
			<!-- PLACES -->
			<div data-role="page" id="places" data-title="Places">
			  <div data-role="navbar" data-iconpos="top" class="nav-glyphish-example" data-grid="d">
				    <ul>
				        <li><a href="#home" data-transition="none" data-icon="home" data-theme="c">Map</a></li>
				        <li><a href="#chat" data-transition="none" data-icon="edit" data-theme="c">Chat</a></li>
				        <li><a href="#share" data-transition="none" data-icon="check" data-theme="c">Share</a></li>
				        <li><a href="#places" data-transition="none"  data-icon="star" class="ui-btn-active" data-theme="c">Places</a></li>
				        <li><a href="#settings" data-transition="none" data-icon="gear" data-theme="c">Settings</a></li>
				   </ul>
    			   </div>
    			   <div id='messagesDiv'></div>
			</div>
			<!-- /PLACES -->	
			<!-- SETTINGS -->
			<div data-role="page" id="settings" data-title="Settings">
			   <div data-role="navbar" data-iconpos="top" class="nav-glyphish-example" data-grid="d">
				    <ul>
				        <li><a href="#home" data-transition="none" id="home" data-icon="home" data-theme="c">Map</a></li>
				        <li><a href="#chat" data-transition="none" id="chat" data-icon="edit" data-theme="c">Chat</a></li>
				        <li><a href="#share" data-transition="none" id="share" data-icon="check" data-theme="c">Share</a></li>
				        <li><a href="#places" data-transition="none" id="places"  data-icon="star" data-theme="c">Places</a></li>
				        <li><a href="#settings" data-transition="none" data-icon="gear" id="settings"  class="ui-btn-active" data-theme="c">Settings</a></li>
				   </ul>
    		  </div>
    		  <div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
	    		  <h3>Add Friends</h3>
			    	  <form id="addFriend">
			            <label>Friend's email</label><input type='text' class='friend' placeholder='Add Friend...'>
			            <input type="button" id="boton" data-theme="e" value="Add Friend">
			          </form> 
		      </div><!--collapsible1-->
		      <div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
    				<h3>update your position</h3>
	            		<input type="button" id="actualizaLoc" data-theme="e" value="Update">
			  </div><!--collapsible2-->
			</div>
			<!-- /SETTINGS -->	
		
	    </div>

        <script src="js/lib/phonegap-1.4.1.js"></script>
        <script src="http://www.parsecdn.com/js/parse-1.2.8.min.js"></script>       
	    <script type="text/javascript" src="js/settings.js"></script>
		<script type="text/javascript" src="js/chat.js"></script>
		<script type="text/javascript" src="js/home.js"></script>
		

       
    </body>
</html>